<template>
  <div class="hello" :style="helloStyle">
    <h1>{{ $t("ui.welcomeShow.title", { msg }) }}</h1>
    <p>{{ $t("ui.welcomeShow.description") }}</p>
    <div class="card-container" :style="cardContainerStyle">
      <a-row :gutter="16" class="card-row">
        <a-col :span="8">
          <a-card :bordered="false" class="card">
            <p class="highlight">{{ $t("ui.welcomeShow.card1.title") }}</p>
            <p>{{ $t("ui.welcomeShow.card1.description") }}</p>
            <a href="#">{{ $t("ui.welcomeShow.card1.linkText") }}</a>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :bordered="false" class="card">
            <p class="highlight">{{ $t("ui.welcomeShow.card2.title") }}</p>
            <p>{{ $t("ui.welcomeShow.card2.description") }}</p>
            <a href="#">{{ $t("ui.welcomeShow.card2.linkText") }}</a>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :bordered="false" class="card">
            <p class="highlight">{{ $t("ui.welcomeShow.card3.title") }}</p>
            <p>{{ $t("ui.welcomeShow.card3.description") }}</p>
            <a href="#">{{ $t("ui.welcomeShow.card3.linkText") }}</a>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
  <div v-if="decodedToken">
    <h2>Token 信息:</h2>
    <pre>{{ decodedToken }}</pre>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, onMounted } from "vue";
import { Row, Col, Card } from "ant-design-vue";
import { getModeVar } from "@/modules/theme"; // 导入全局变量函数
import { useStore } from "vuex"; // 导入 Vuex
import { jwtDecode } from "jwt-decode"; // 导入 jwt-decode

export default defineComponent({
  name: "WelcomeShow",
  props: {
    msg: String,
  },
  components: {
    "a-row": Row,
    "a-col": Col,
    "a-card": Card,
  },
  setup() {
    const store = useStore(); // 使用 Vuex store
    const decodedToken = ref(null); // 用于存储解码后的 Token 信息

    // 计算属性，获取 accessToken
    const accessToken = computed(() => store.getters["users/getAccessToken"]);

    onMounted(() => {
      if (accessToken.value) {
        try {
          decodedToken.value = jwtDecode(accessToken.value); // 解码 Token
        } catch (error) {
          console.error("解码 Token 失败:", error);
        }
      }
    });

    // 使用计算属性动态获取样式
    const helloStyle = computed(() => {
      const bgColor = getModeVar("bgColor"); // 获取背景颜色
      const infoColor = getModeVar("infoColor"); // 获取字体颜色
      const bgColor2 = getModeVar("bgColor2"); // 获取背景颜色2
      // 打印当前的背景色和字体颜色
      console.log("Current helloStyle(颜色跟踪):", {
        backgroundColor: bgColor,
        backgroundColor2: bgColor2,
        color: infoColor,
      });
      console.log(document.documentElement);
      // document.documentElement.style.setProperty('--bg-color', bgColor);
      // document.documentElement.style.setProperty('--info-color', infoColor);
      // document.documentElement.style.setProperty('--bg-color-2', bgColor2);
      return {
        backgroundColor: bgColor,
        color: infoColor,
      };
    });

    const cardContainerStyle = computed(() => {
      const bgColor = getModeVar("bgColor"); // 如果卡片容器需要背景色
      // document.documentElement.style.setProperty('--bg-color', bgColor);
      // 打印当前卡片容器的背景色
      console.log("Current cardContainerStyle(背景跟踪):", {
        backgroundColor: bgColor,
      });

      return {
        backgroundColor: bgColor,
      };
    });

    return {
      helloStyle,
      cardContainerStyle,
      decodedToken,
    };
  },
});
</script>

<style scoped lang="scss">
.hello {
  padding: 0 20px 0 0; /* 其他样式保持不变 */
  background-color: var(--bg-color); // 使用 CSS 变量
  color: var(--info-color); // 使用 CSS 变量
}

.card-container {
  padding: 20px;
  border-radius: 8px;
  background-color: var(--bg-color); // 如果卡片容器需要背景色
}

.card-row {
  display: flex; /* 将 a-row 设置为 Flexbox */
}

.card {
  display: flex;
  flex-direction: column; /* 使内容垂直排列 */
  height: 100%; /* 使卡片充满父容器的高度 */
  background-color: var(--bg-color-2); // 如果卡片容器需要背景色
}

.highlight {
  font-size: 1.2em; /* 放大字体 */
  font-weight: bold; /* 加粗字体 */
}
</style>
